import React from 'react';
import { connect } from 'react-redux';
import BaseComponent from '../../components/common/baseComponent.js';

export default function withNav(Component, tabIndex, otherPorps = {}) {
  @connect(() => {
    return {
    };
  })
  class NavWrappedComponent extends BaseComponent {
    goUseable = () => {
      this.props.history.push('useableCouponList');
    }

    goGiftCenter = () => {
      this.props.history.push('giftCenter');
    }

    goCouponList = () => {
      this.props.history.push('couponList');
    }

    renderNav = () => {
      const { showNav } = this.props;
      if (!showNav) {
        return null;
      } else {
        return (
          <div className="nav-tab-escort">
            <div className={`tab-cell ${tabIndex === 0 ? 'active' : ''}`} onClick={this.goUseable}>
              <i className={`iconfont icon ${tabIndex === 0 ? 'active icon-station-full' : 'icon-station-empty'}`} />
              <div className="cell-title">去加油</div>
            </div>
            <div className={`tab-cell ${tabIndex === 1 ? 'active' : ''}`} onClick={this.goGiftCenter}>
              <i className={`iconfont icon ${tabIndex === 1 ? 'active icon-gift-full' : 'icon-gift-empty'}`} />
              <div className="cell-title">优惠中心</div>
            </div>
            <div className={`tab-cell ${tabIndex === 2 ? 'active' : ''}`} onClick={this.goCouponList}>
              <i className={`iconfont icon ${tabIndex === 2 ? 'active icon-coupon-full' : 'icon-coupon-empty'}`} />
              <div className="cell-title">我的优惠</div>
            </div>
          </div>
        );
      }
    }

    render() {
      return (
        <div className="nav-cq">
          {this.renderNav()}
          <div className="app-container"><Component {...this.props} {...otherPorps} /></div>
        </div>
      );
    }
  }
  return NavWrappedComponent;
}

